<script setup lang="ts">
import { ref, defineEmits, toRaw, defineProps } from "vue";
import { getCurrentUser, updateMyUser } from "@/api/user";
import { message } from "ant-design-vue";
import type { DescriptionsProps } from "ant-design-vue";
import { UploadOutlined } from "@ant-design/icons-vue";
import type { UploadProps, UploadChangeParam } from "ant-design-vue";

const props = defineProps({
  userInfo: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["update:userInfo"]);

const fileList = ref<UploadProps["fileList"]>([]);
const size = ref<DescriptionsProps["size"]>("default");

const onChange = (e: any) => {
  console.log("size checked", e.target.value);
  size.value = e.target.value;
};

// 编辑状态控制
const isEditing = ref(false);

const editForm = ref({ ...props.userInfo });
//图片按钮
const handleChange = (info: UploadChangeParam) => {
  if (info.file.status !== "uploading") {
    console.log(info.file, info.fileList);
  }
  if (info.file.status == "done") {
    console.log("infochange");
    console.log(info.fileList[0].response.data);
    editForm.value.userAvatar = info.fileList[0].response.data;
    console.log("editForm.value.userAvatar" + editForm.value.userAvatar);
  } else if (info.file.status === "error") {
    message.error(`${info.file.name} file upload failed.`);
  }
};

// 保存编辑
const handleSave = async () => {
  const rawEditForm = toRaw(editForm.value);
  const res = await updateMyUser(rawEditForm);
  if (res.data.code == 0 && res.data.data) {
    await getCurrentUser();
    emit("update:userInfo", res.data.data);
    isEditing.value = false;
    message.success("个人信息更新成功！");
  } else {
    message.error("更新失败");
  }
};

// 取消编辑
const handleCancel = () => {
  editForm.value = { ...props.userInfo };
  isEditing.value = false;
};
</script>

<template>
  <a-card title="个人信息">
    <template #extra>
      <a-space>
        <a-button v-if="!isEditing" type="primary" @click="isEditing = true">
          编辑信息
        </a-button>
        <template v-else>
          <a-button type="primary" @click="handleSave">保存</a-button>
          <a-button @click="handleCancel">取消</a-button>
        </template>
      </a-space>
    </template>
    <a-radio-group v-model:value="size" @change="onChange">
      <a-radio value="default">default</a-radio>
      <a-radio value="middle">middle</a-radio>
      <a-radio value="small">small</a-radio>
    </a-radio-group>
    <br />
    <br />
    <div v-if="!isEditing">
      <a-descriptions bordered :size="size">
        <a-descriptions-item label="头像" :span="3">
          <a-image v-if="userInfo.userAvatar" :src="userInfo.userAvatar"
          :width="100" height: auto;/>
        </a-descriptions-item>
        <a-descriptions-item label="姓名">{{
          userInfo.userName
        }}</a-descriptions-item>
        <a-descriptions-item v-if="userInfo.dormitoryVO" label="宿舍号">{{
          userInfo.dormitoryVO.dormitoryName
        }}</a-descriptions-item>
        <a-descriptions-item label="角色">{{
          userInfo.userRole
        }}</a-descriptions-item>
        <a-descriptions-item label="账号">{{
          userInfo.userAccount
        }}</a-descriptions-item>
        <a-descriptions-item label="密码" :span="2">{{
          userInfo.userPassword
        }}</a-descriptions-item>
        <a-descriptions-item label="地址" :span="3">{{
          userInfo.dormitoryVO.building.address
        }}</a-descriptions-item>
        <a-descriptions-item label="简介" :span="3">{{
          userInfo.userProfile
        }}</a-descriptions-item>
      </a-descriptions>
    </div>
    <div v-else>
      <a-form :model="editForm" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="姓名" required>
              <a-input v-model:value="editForm.userName" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="宿舍号" required>
              <a-input
                v-model:value="userInfo.dormitoryVO.dormitoryName"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="账号" required>
              <a-input v-model:value="editForm.userAccount" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="密码" required>
              <a-input-password v-model:value="editForm.userPassword" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="简介" required>
              <a-input v-model:value="editForm.userProfile" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <br />
      <div>
        <a-upload
          v-model:file-list="fileList"
          action="http://localhost:8080/api/file/uploadNew"
          list-type="picture"
          @change="handleChange"
        >
          <a-button>
            <upload-outlined></upload-outlined>
            upload
          </a-button>
        </a-upload>
      </div>
    </div>
  </a-card>
</template>

<style scoped>
/* tile uploaded pictures */
.upload-list-inline :deep(.ant-upload-list-item) {
  float: left;
  width: 200px;
  margin-right: 8px;
}
.upload-list-inline [class*="-upload-list-rtl"] :deep(.ant-upload-list-item) {
  float: right;
}
</style>
